<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>噪声生成复杂的纹理-梯度噪声</title>
    <style>
        canvas{
            border:1px solid #ccc;
        }
    </style>
</head>
<body>
    <canvas width="554" height="554"></canvas>

    <script src="/common/lib/gl-renderer.js"></script>

    <script type="module">
        import { grayMatrix } from "/review/common/lib/utils.js"

        /**
         * 1.创建renderer对象
         * 2.创建webgl程序
         * 3.创建uniform变量
         * 4.将数据存入缓冲区
         * 5.渲染
         * */ 

        //  1.
        const canvas = document.querySelector("canvas");
        const renderer = new GlRenderer(canvas);

        (async function(){
            // 2.
            const vertex = `
                attribute vec2 a_vertexPosition;
                attribute vec2 uv;
                varying vec2 vUv;

                void main(){
                    vUv = uv;
                    gl_Position = vec4(a_vertexPosition, 1.0, 1.0);
                }
            `;
            const fragment = `
                #ifdef GL_ES
                    precision mediump float;
                #endif

                varying vec2 vUv;

                // 二维随机向量，值域范围（-1,1）
                vec2 random2(vec2 st){
                    st = vec2(
                            dot(st, vec2(127.1, 311.7)),
                            dot(st, vec2(269.5, 183.3))
                        );
                    return -1.0 + 2.0 * fract(sin(st) * 43758.5453123);
                }
                // 二维噪声，值域范围（-1,1）
                float noise(vec2 st){
                    vec2 i = floor(st);
                    vec2 f = fract(st);
                    vec2 u = smoothstep(0.0, 1.0, f);
                    
                    // 对x、y方向分别做线性插值
                    return mix(
                        mix(
                            dot(random2(i + vec2(0.0,0.0)), f - vec2(0.0,0.0)), 
                            dot(random2(i + vec2(1.0,0.0)), f - vec2(1.0,0.0)), u.x), 
                        mix(
                            dot(random2(i + vec2(0.0,1.0)), f - vec2(0.0,1.0)), 
                            dot(random2(i + vec2(1.0,1.0)), f - vec2(1.0,1.0)), u.x), 
                        u.y);
                }

                void main(){
                    vec2 st = vUv;
                    st *= 20.0;
                    
                    float d = noise(st);

                    gl_FragColor.rgb = vec3(d * 0.5 + 0.5);
                    gl_FragColor.a = 1.0;
                }
            `;

            const program = renderer.compileSync(fragment,vertex);
            renderer.useProgram(program);

            // 3.
            
            // 4.
            renderer.setMeshData([{
                positions:[
                    [-1, -1],
                    [-1, 1],
                    [1, 1],
                    [1, -1],
                ],
                attributes:{
                    uv:[
                        [0, 0],
                        [0, 1],
                        [1, 1],
                        [1, 0],
                    ]
                },
                cells: [[0, 1, 2], [2, 0, 3]],
            }]);

            // 5.
            renderer.render();
        })();
        
    </script>
</body>
</html>